<template>
  <div class="login-wrap">
    <div class="login-outside">
      <div class="login-box">
        <div class="login">
          <div class="login-title tac">登录</div>
          <div class="login-form">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item
                label="手机号"
                label-width="60px"
                size="medium"
                prop="phone"
              >
                <el-input
                  type="text"
                  v-model="ruleForm.phone"
                  autocomplete="off"
                  placeholder="手机号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                label-width="60px"
                size="medium"
                prop="password"
              >
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm', 'login')"
                  class="login_btn"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="register" ref="register-box">
          <div class="login-title tac">注册</div>
          <div class="register-form">
            <el-form
              :model="r_ruleForm"
              :rules="rules"
              ref="r_ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item
                label="手机号"
                label-width="60px"
                size="medium"
                prop="r_phone"
              >
                <el-input
                  type="text"
                  v-model="r_ruleForm.r_phone"
                  autocomplete="off"
                  placeholder="手机号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                label-width="60px"
                size="medium"
                prop="r_password"
              >
                <el-input
                  type="password"
                  v-model="r_ruleForm.r_password"
                  autocomplete="off"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="昵称"
                label-width="60px"
                size="medium"
                prop="r_nickname"
              >
                <el-input
                  type="text"
                  v-model="r_ruleForm.r_nickname"
                  autocomplete="off"
                  placeholder="昵称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="管理密码"
                label-width="80px"
                size="medium"
                prop=""
              >
                <el-input
                  type="password"
                  v-model="super_password"
                  autocomplete="off"
                  placeholder="请输入超级管理密码"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="submitForm('r_ruleForm', 'register')"
                  class="login_btn"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="choose-text flex">
        <el-button type="success" @click="pullReg('')">立即登录</el-button>
        <el-button type="primary" @click="pullReg('0px')">立即注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { registerApi, loginApi, test } from "@/http/api";
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      var phone = value.replace(/\s/g, "");
      let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!regs.test(phone)) {
        callback(new Error("手机号格式不正确"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    var validateNickName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("昵称不能为空"));
      } else {
        callback();
      }
    };
    return {
      super_password: "",
      ruleForm: {
        phone: "",
        password: "",
      },
      r_ruleForm: {
        r_phone: "",
        r_password: "",
        r_nickname: "",
      },
      rules: {
        phone: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        r_phone: [{ validator: validateUser, trigger: "blur" }],
        r_password: [{ validator: validatePass, trigger: "blur" }],
        r_nickname: [{ validator: validateNickName, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 控制注册板块下滑
    pullReg(e) {
      this.$refs["register-box"].style.top = e;
    },
    // 登录和注册的按钮
    submitForm(formName, method) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (method === "login") {
            this.login();
          } else {
            if (this.super_password != "admin") {
              this.$message.error("管理员密码错误");
            } else {
              this.register();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 注册
    async register() {
      try {
        let res = await registerApi({
          phone: this.r_ruleForm.r_phone,
          password: this.r_ruleForm.r_password,
          nickName: this.r_ruleForm.r_nickname,
        });
        if (res.errCode === 0) {
          this.r_ruleForm.r_phone = "";
          this.r_ruleForm.r_password = "";
          this.r_ruleForm.r_nickname = "";
        }
        this.$message({
          message: res.message,
          type: "success",
        });
        this.$refs["register-box"].style.top = "";
      } catch (e) {
        this.$message({
          message: "手机号已存在",
          type: "error",
        });
      }
    },
    // 登录
    async login() {
      try {
        let res = await loginApi({
          username: this.ruleForm.phone,
          password: this.ruleForm.password,
        });
        if (res.errCode == 0) {
          this.ruleForm.phone = "";
          this.ruleForm.password = "";
          sessionStorage.setItem("token", res.data);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          let loginTime = new Date();
          sessionStorage.setItem("loginTime", loginTime.getTime());
          this.$router.push("/home");
        }
      } catch (e) {
        this.$message({
          message: "账号或密码错误",
          type: "error",
        });
      }
    },
    // 这是测试本地接口的
    async test() {
      let params = {
        name: "Fancy",
      };
      let res = await test(params);
      console.log(res);
    },
  },
  mounted() {
    this.test();
  },
};
</script>
 
<style lang="less" scoped>
.login-wrap {
  height: 100%;
  background-image: url("../../assets/images/login-background.jpeg");
  position: relative;
  .login-outside {
    position: absolute;
    width: 500px;
    height: 460px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .login-box {
      border-radius: 20px;
      position: absolute;
      width: 500px;
      height: 400px;
      overflow: hidden;
      .login {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.8;
        .login-form {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          .el-form-item {
            margin-bottom: 30px;
          }
          .login_btn {
            width: 100%;
          }
        }
      }
      .register {
        position: absolute;
        left: 0;
        top: -500px;
        width: 100%;
        height: 100%;
        background-color: #409eff;
        transition: all 1s;
        .register-form {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          .el-form-item {
            margin-bottom: 30px;
            /deep/ .el-form-item__label {
              color: #fff;
            }
          }
          .login_btn {
            width: 100%;
          }
        }
        .login-title {
          color: #fff;
        }
      }

      .login-title {
        font-size: 30px;
        font-weight: 700;
        padding: 30px 0;
      }
    }
    .choose-text {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>